<script>
    App.component('Brand', ({ serviceName, icon }) => {
        return {
            $template: '#brand-template',
            serviceName,
            icon,
        }
    })
</script>
<style>.brand-icon { width: 1.65rem; height: 1.65rem; margin-right: .4rem; }</style>
<template id="brand-template">
    <div class="flex items-center flex-shrink-0 max-w-sidebar">
        <a :title="serviceName" v-href="{ $page:'' }"
           class="pl-3 text-2xl whitespace-nowrap overflow-x-hidden flex items-center">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5l-9-4m0 4a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5.13 12A9.69 9.69 0 0 1 12 20.92A9.69 9.69 0 0 1 6.87 17c-.34-.5-.63-1-.87-1.53c0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53z" fill="currentColor"/>
            </svg>
            {{serviceName}}
        </a>
    </div>
</template>
